<template>
	<!-- 文章列表 -->
	<view>
		<image v-if="banner!=''" :src="banner" mode="scaleToFill" style="width: 94%;margin: 20rpx 3%;border-radius: 30rpx;"></image>
		<!-- 属性标签 -->
		<u-tabs v-if="attrShow" :list="attrList" :is-scroll="true" :current="current" @change="change"></u-tabs>
		<!-- 分类标签 -->
		<u-tabs v-if=" cateShow && cateList.length>0" :list="cateList" :is-scroll="true" :current="currentCate" @change="changeCate"></u-tabs>
		<!-- 文章列表 -->
		<view class="article" v-if="articleList.length>0">
			<u-card @click="goUrl('/pages/index/article_desc?id='+item.id)" v-for="(item,index) in articleList" :key="index" :title="item.title" :sub-title="item.createtime" >
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2" style="font-size:26rpx;color:#545454;">{{item.desc}}</view>
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="" slot="foot" style="display: flex;justify-content: space-between;width: 50%;margin: 0 0 0 50%;">
						<view><u-icon name="eye-fill" size="28"></u-icon>{{item.read_num}}</view>
						<view><u-icon name="thumb-up-fill" size="28"></u-icon>{{item.dz_num}}</view>
						<view><u-icon name="star-fill" size="28"></u-icon>{{item.sc_num}}</view>
					
				</view>
			</u-card>
		</view>
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:'',
				attrList: [],
				attrIdList:[],
				current: 0,
				cateList:[],
				cateIdList:[],
				currentCate:0,
				page:1,
				limit:10,
				total:0,
				articleList:[],
				attrShow:false,
				cateShow:false,
				options:[],
				articlecate_id:''

			}
		},
		onLoad(options) {
			this.options = options;
			if(!options.articleattr_id){
				this.attrShow = true;
				this.getAttrList();
			}else{
				if(!options.articlecate_id){
					this.cateShow = true;
					this.getAttrOptions(options.articleattr_id);
					this.getCateList(options.articleattr_id);
				}else{
					this.articlecate_id = options.articlecate_id;
					this.getAttrOptions(options.articleattr_id);
					this.getArticleList(options.articlecate_id);
				}
				
			}
		},
		onReachBottom() {
			if(this.articleList.length<this.total){
				this.getArticleList(this.articlecate_id);
			}
		},
		methods: {
			getAttrOptions(attr_id){
				var _this = this;
				_this.$http('article.getAttrOptions',{
					attr_id:attr_id
				}).then(res=>{
					_this.banner = res.data.image;
				})
			},
			//获取属性
			getAttrList(){
				var _this = this;
				_this.$http('article.getAttrList',{}).then(res=>{
					
					var data = res.data;
					console.log(res.data);
					data.forEach(item=>{
						_this.attrList.push({name:item.title});
						_this.attrIdList.push(item.id);
					})
					this.cateList = [];
					this.cateIdList = [];
					this.getCateList(this.attrIdList[_this.current]);
				})
			},
			//获取指定属性下的分类
			getCateList(articleattr_id){
				var _this = this;
				_this.$http('article.getCateList',{
					articleattr_id:articleattr_id,
				}).then(res=>{
					var data = res.data;
					data.forEach(item=>{
						_this.cateList.push({name:item.title});
						_this.cateIdList.push(item.id);
					})
					this.articleList = [];
					this.page = 1;
					this.getArticleList(this.cateIdList[_this.currentCate]);
				})
			},
			//获取指定分类下的文章
			getArticleList(articlecate_id){
				var _this = this;
				_this.$http('article.getArticleList',{
					articlecate_id:articlecate_id,
					page:_this.page,
					limit:_this.limit,
				}).then(res=>{
					_this.articleList = _this.articleList.concat(res.data.list);
					_this.total = res.data.total;
					_this.page++;
				})
			},
			//切换属性标签
			change(index) {
				this.current = index;
				this.cateList = [];
				this.cateIdList = [];
				this.getCateList(this.attrIdList[index]);
			},
			//切换分类标签
			changeCate(index){
				this.currentCate = index;
				this.articlecate_id = this.cateIdList[index];
				this.articleList = [];
				this.page = 1;
				this.getArticleList(this.articlecate_id);
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style >
	 .article .u-body-item {
	 	font-size: 32rpx;
	 	color: #333;
	 	padding: 20rpx 10rpx;
	 }
		
	 .article .u-body-item image {
	 	width: 120rpx;
	 	flex: 0 0 120rpx;
	 	height: 120rpx;
	 	border-radius: 8rpx;
	 	margin-left: 12rpx;
	 }
</style>
